<template>
  <div>
    <el-popover placement="bottom" :width="240" trigger="hover">
      <template #reference>
        <el-button
          link
          type="danger"
          size="small"
          :class="[props.warnings.length > 0 ? 'vibrate-fast' : '']"
        >
          <el-icon v-if="props.warnings.length > 0">
            <!-- class="blinking" -->
            <WarningFilled />
          </el-icon>
          <el-icon v-else><SuccessFilled /></el-icon>
          <span>流量</span>
        </el-button>
      </template>
      <el-text
        type="danger"
        size="small"
        v-for="item in props.warnings"
      >
        <b>{{ item.t }}&emsp;</b>
        <span>{{ item.m }}</span>
        <br />
      </el-text>
    </el-popover>
  </div>
</template>

<script setup>
const props = defineProps({
  warnings: {
    type: Array,
    required: false,
    default: new Array(),
  },
});
</script>

<style scoped>
@import "@/styles/blinking.css";
@import "@/styles/vibrate.css";
</style>
